/*
 * @Author: your name
 * @Date: 2021-11-11 10:58:52
 * @LastEditTime: 2021-11-15 14:08:03
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \dComponent\src\page\Palert.js
 */
import { useState } from 'react'
import { Button, Modal } from '../dComponent'
export default function Palert () {
    let [lgShow, setlgShow] = useState(false)
    let [mdShow, setmdShow] = useState(false)
    let [smShow, setsmShow] = useState(false)
    const [drShow, setdrShow] = useState(false)
    const [ryShow, setryShow] = useState(false)
    function action(e, type){
        // eslint-disable-next-line no-eval
        eval(`set${type}Show(true)`)
     }
    return(
        <div className="page">
            <h2>弹窗</h2>
            <div className="flexBox">   
                <Button
                    cls={'left-30'}
                    bgColor='none'
                    onClick={(e)=>{action(e,'lg')}}
                    dashed
                >大号弹窗</Button>
                <Button
                    onClick={(e)=>{action(e,'md')}}
                    cls={'left-30'}
                    bgColor='none'
                    dashed
                >中号弹窗</Button>
                <Button
                    onClick={(e)=>{action(e,'sm')}}
                    cls={'left-30'}
                    bgColor='none'
                    dashed
                >小号弹窗</Button>
                <Button
                    onClick={(e)=>{action(e,'dr')}}
                    cls={'left-30'}
                    bgColor='none'
                    solid
                >可拖拽弹窗</Button>
                <Button
                    onClick={(e)=>{action(e,'ry')}}
                    cls={'left-30'}
                    bgColor='none'
                    solid
                >任意大小弹窗</Button>
            </div>
            <Modal
                title='大号弹窗'
                action={action}
                visible={lgShow}
                size='lg'
                close={()=>{
                    setlgShow(false)
                }}
                buttons={[
                    <Button
                        onClick={()=>{
                            setlgShow(false)
                        }}
                        bgColor='#ff4d4f' 
                    >取消</Button>,
                    <Button
                        bgColor='#46a6ff'
                        onClick={()=>{
                            setlgShow(false)
                        }}
                    >确认</Button>
                ]}
            >
                <p>这是个大号弹窗</p>
                <p>还能滚动内容，还能滚动内容</p>
                <p>按钮自定义、按钮自定义、按钮自定义</p>
                <p>插入任何内容都可以</p>
                <p>插入任何内容都可以</p>
                <p>插入任何内容都可以</p>
            </Modal>         
            <Modal
                title='中号弹窗'
                action={action}
                visible={mdShow}
                size='md'
                close={()=>{
                    setmdShow(false)
                }}
                buttons={[
                    <Button
                        onClick={()=>{
                            setmdShow(false)
                        }}
                        cls={'btn-md'}
                        bgColor='#ff4d4f'
                    >取消</Button>,
                    <Button
                        cls={'btn-md'}
                        onClick={()=>{
                            setmdShow(false)
                        }}
                        bgColor='#46a6ff'
                    >确认</Button>
                ]}
            >
                <span>这是个中号弹窗</span>
            </Modal>
            <Modal
                title='小号弹窗'
                size='sm'
                visible={smShow}
                action={action}
                close={()=>{
                    setsmShow(false)
                }}
                buttons={[
                    <Button
                        cls={'btn-sm'}
                        onClick={()=>{
                            setsmShow(false)
                        }}
                        bgColor='#ff4d4f'
                    >取消</Button>,
                    <Button
                        cls={'btn-sm'}
                        onClick={()=>{
                            setsmShow(false)
                        }}
                        bgColor='#46a6ff'
                    >确认</Button>
                ]}
            >
                <span>这是个小号弹窗</span>
            </Modal>

            <Modal
                title='可拖拽弹窗'
                size='md'
                draggable
                visible={drShow}
                action={action}
                close={()=>{
                    setdrShow(false)
                }}
                buttons={[
                    <Button
                        cls={'btn-sm'}
                        onClick={()=>{
                            setdrShow(false)
                        }}
                        bgColor='#ff4d4f'
                    >取消</Button>,
                    <Button
                        cls={'btn-sm'}
                        onClick={()=>{
                            setdrShow(false)
                        }}
                        bgColor='#46a6ff'
                    >确认</Button>
                ]}
            >
                <span>可以进行拖拽</span>
            </Modal>
            <Modal
                title='任意大小弹窗'
                draggable
                visible={ryShow}
                action={action}
                close={()=>{
                    setryShow(false)
                }}
                style={{width:'800px', height:'600px'}}
                buttons={[
                    <Button
                        cls={'btn-sm'}
                        onClick={()=>{
                            setryShow(false)
                        }}
                        bgColor='#ff4d4f'
                    >取消</Button>,
                    <Button
                        cls={'btn-sm'}
                        onClick={()=>{
                            setryShow(false)
                        }}
                        bgColor='#46a6ff'
                    >确认</Button>
                ]}
            >
                <span>可以进行拖拽</span>
            </Modal>
        </div>
    )
}

